<template>
    <a-modal v-model:visible="visible" width="100%" :wrap-class-name="'full-modal-dark'" :footer="null"
        destroyOnClose>
        <template #title>
            <span>{{ Status.title }}</span>
            &nbsp;&nbsp;&nbsp;
            <!-- <a-switch v-model:checked="theme">
                <template #checkedChildren>
                    <U_Sun />
                </template>
                <template #unCheckedChildren>
                    <U_Moon />
                </template>
            </a-switch>
            &nbsp;&nbsp;&nbsp; -->
            <a-button type="default" size="small" @click="emit('DownLoad', Status.id)">
                <template #icon>
                    <CloudDownloadOutlined />
                </template>
                源码下载 (修改前)
            </a-button>
            &nbsp;&nbsp;&nbsp;
            <a-button type="default" size="small" @click="ImageVisible = true">原型图</a-button>
            &nbsp;&nbsp;&nbsp;
            <a-button type="primary" size="small" @click="UpLoadFileStatus = true" v-if="ShowButton">上传代码</a-button>
            &nbsp;&nbsp;&nbsp;
            <a-button size="small" @click="Save" v-if="ShowButton">暂存代码</a-button>
            &nbsp;&nbsp;&nbsp;
            <a-button type="primary" size="small" @click="Send" v-if="ShowButton">提交代码</a-button>
        </template>
        <replView ref="replViewContent" :Codes="Codes" v-if="CodeStatus" />
    </a-modal>
    <UpLoadFileVue v-model:show="UpLoadFileStatus" @refresh="UpLoadCode" />
    <ImagePereviewVue v-model:show="ImageVisible" :Path="imagePath" />
</template>
<script lang="ts" setup>
import { ref, watch, createVNode, nextTick } from 'vue';
import replView from '../../_replView/index.vue'
import { CloudDownloadOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
import { UseUIStore } from '../../../store/UI'
import ImagePereviewVue from '../../_imagePreview/index.vue'
import UpLoadFileVue from './UpLoadFile.vue';
import Inspect from '@/apis/inspect'

const UI = UseUIStore();
const emit = defineEmits(['update:show', 'DownLoad', 'RefreshPage']);

const props = defineProps({
    show: Boolean,
    EditStatus: Boolean,
    Status: {
        default: () => {
            return {
                codeContent: '',
                description: '',
                id: '',
                imagePath: '',
                title: '',
                updateTime: 0
            }
        }
    }
});

const ShowButton = ref<boolean>(!props.EditStatus);
const replViewContent = ref();
const ImageVisible = ref<boolean>(false);
// const theme = ref<boolean>(UI.classType == 'dark');
const visible = ref<boolean>(props.show);
const Codes = ref<string>(props.Status.codeContent);
const imagePath = ref<string[]>(props.Status.imagePath.split(';'))
const CodeStatus = ref<boolean>(true);
const UpLoadFileStatus = ref<boolean>(false);

watch(() => props.show, (val) => {
    visible.value = val
})

watch(visible, (val) => {
    emit('update:show', val)
})

// watch(theme, () => {
//     UI.changeTheme();
// });

function UpLoadCode(Code: string) {
    CodeStatus.value = false;
    Codes.value = Code;
    nextTick(() => {
        CodeStatus.value = true;
        UpLoadFileStatus.value = false;
    });
};

function Save() {
    var Code = replViewContent.value.GetCodes();
    Inspect.SaveInspect({
        topicId: props.Status.id,
        codeContent: Code
    }).then((res: any) => {
        emit('RefreshPage');
    })
}

function Send() {
    Modal.confirm({
        title: '是否提交代码？',
        icon: createVNode(ExclamationCircleOutlined),
        content: '注意：提交后，不可以再次进行提交',
        onOk() {
            var Code = replViewContent.value.GetCodes();
            Inspect.SendInspect({
                topicId: props.Status.id,
                codeContent: Code
            }).then((res: any) => {
                emit('RefreshPage', true);
            })
        },
        class: 'test',
    });
}



</script>